// 组件的data 选项必须是一个函数?
// 原因:组件本质为了复用 复用组件的时候要保证组建内部的数据是互相独立的不影响
// 为了保证数据独立,必须是一个函数,每次复用都会调用函数 每次调用函数都会
// 生成一份独立无二的内存空间 各个复用的组件就数据互相独立了

// js底层机制:函数每次调用return出来的对象会生成一块全新的内存  虽然初始值看起来一样 但是互相不影响
// state :为什么要写成函数 ? 复用的时候数据互相不影响
// sttate:{} 项目不够大  不需要复用 定义普通对象没有问题

// 为什么是 state:() => ({})
// 当函数中只有一个返回值的时候 可以省略return
// 加括号的目的 仅仅是为了包裹一下变成表达式 就没有语法错误了
// state:()=>{return {}}

// 总结:写函数return 对象的应用 vue data / state /props  :默认参数 复杂类型 必须是一个工厂函数
// 都是为了保证复用的时候数据互相独立 不影响 低层机制都是一样的
import { userAccountLogin } from '@/api/user.js'
// 用户模块
const user = {
  namespaced: true,
  // 定义数据
  state: () => ({
    // 个人信息
    profile: {
      id: '',
      account: '',
      nickname: '',
      avatar: '',
      token: '',
      mobile: ''
    }
  }),
  // 修改数据
  mutations: {
    setUserinfo (state, payload) {
      state.profile = payload
    },
    clearProfile (state) { // 清除数据
      state.profile = {}
    }
  },
  // 异步
  actions: {
    async Setuser ({ commit }, { account, password }) {
      const res = await userAccountLogin({ account, password })
      // console.log(res)
      commit('setUserinfo', res.data.result)
    }
  },
  // 基于state的计算属性
  getters: {}

}
export default user
